<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script type="text/javascript">
			$(window).on('load',function(){
				$('.preloader').addClass('complete')
			})
		</script>
	</head>
	<body>
		<div class="preloader">
			<div class="loader"></div>
		</div>
	</body>
	
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		.preloader{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/* background: #000; */
			transition: 1s;
		}
		
		.preloader:before{
			content: '';
			position: absolute;
			left: 0;
			width: 50%;
			height: 100%;
			background: #000;
			transition: 1s;
		}
		.preloader.complete:before{
			left: -50%;
		}
		.preloader:after{
			content: '';
			position: absolute;
			right: 0;
			width: 50%;
			height: 100%;
			background: #000;
			transition: 1s;
		}
		.preloader.complete:after{
			right: -50%;
		}
		
		
		/* 开始动画 */
		.loader{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 40px;
			height: 40px;
			box-sizing: border-box;
			border: 3px solid #fff;
			animation: animate 2s linear infinite;
			z-index: 10000;
		}
		
		.loader:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right:0;
			bottom:0;
			width: 100%;
			height: 100%;
			background: #fff;
			animation: animateBg 2s linear infinite;
		}
		.preloader.complete{
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}
		@keyframes animate{
			0%{
				transform: translate(-50%,-50%) rotate(0deg);
			}
			25%{
				transform: translate(-50%,-50%) rotate(180deg);
			}
			50%{
				transform: translate(-50%,-50%) rotate(180deg);
			}
			75%{
				transform: translate(-50%,-50%) rotate(360deg);
			}
			100%{
				transform: translate(-50%,-50%) rotate(360deg);
			}
		}
		@keyframes animateBg{
			0%{
				height: 0;
			}
			25%{
				height: 0;
			}
			50%{
				height: 100%;
			}
			75%{
				height: 100%;
			}
			100%{
				height: 0;
			}
		}
	</style>
</html>